import React, { useState } from "react";
import {
  Form,
  Button,
  Picker,
  Input,
  Cascader,
  Switch,
  Cell,
} from "@nutui/nutui-react";
import styles from "./index.module.scss";
import { listData, options, listDataB } from "./config";
import { ArrowRight } from "@nutui/icons-react";
import { history } from "@tarojs/router";
import Taro from "@tarojs/taro";

function Index() {
  const [form] = Form.useForm();
  const [area, setArea] = useState([]);
  const [address, setAddress] = useState([]);
  const [areaVisible, setAreaVisible] = useState(false);
  const [addressVisible, setAddressVisible] = useState(false);

  const handleClick = () => {
    Taro.navigateTo({
      url: "pages/indexInfo/index",
    });
  };

  return (
    <div className={styles.container}>
      <Form
        form={form}
        labelPosition="left"
        footer={
          <>
            <Button
              nativeType="submit"
              block
              type="primary"
              onClick={handleClick}
            >
              下一步
            </Button>
          </>
        }
      >
        <div className={styles.card}>
          <div>需求信息</div>
          <Form.Item required label="需求额度" name="total">
            <Input type="text" placeholder="请输入需求额度" />
          </Form.Item>
          <Form.Item
            required
            label="需求期数"
            name="num"
            trigger="onConfirm"
            getValueFromEvent={(...args) => args[1]}
            onClick={(event, ref) => {
              ref.open();
            }}
          >
            <Picker options={[listData]}>
              {(value) => {
                return (
                  <Cell
                    style={{
                      padding: 0,
                      "--nutui-cell-divider-border-bottom": "0",
                    }}
                    className="nutui-cell--clickable"
                    title={
                      value.length
                        ? listData.filter((po) => po.value === value[0])[0]
                            ?.text
                        : "请选择需求期数"
                    }
                    extra={<ArrowRight />}
                    align="center"
                  />
                );
              }}
            </Picker>
          </Form.Item>
        </div>
        <div className={styles.card}>
          <div>个人详细资料</div>
          <Form.Item
            required
            label="行业类别"
            name="type"
            trigger="onConfirm"
            getValueFromEvent={(...args) => args[1]}
            onClick={(event, ref) => {
              ref.open();
            }}
          >
            <Picker options={[listDataB]}>
              {(value) => {
                return (
                  <Cell
                    style={{
                      padding: 0,
                      "--nutui-cell-divider-border-bottom": "0",
                    }}
                    className="nutui-cell--clickable"
                    title={
                      value.length
                        ? listDataB.filter((po) => po.value === value[0])[0]
                            ?.text
                        : "请选择行业类别"
                    }
                    extra={<ArrowRight />}
                    align="center"
                  />
                );
              }}
            </Picker>
          </Form.Item>
          <Form.Item required label="公司名称" name="name">
            <Input type="text" placeholder="请输入公司名称" />
          </Form.Item>
          <Form.Item required label="居住地址" name="area">
            <>
              <Cell
                onClick={() => {
                  setAreaVisible(true);
                }}
                style={{
                  padding: 0,
                  "--nutui-cell-divider-border-bottom": "0",
                }}
                className="nutui-cell--clickable"
                title={area?.length ? area : "请选择所在地区"}
                extra={<ArrowRight />}
                align="center"
              />
              <Cascader
                visible={areaVisible}
                placeholder="请选择"
                title="请选择所在地区"
                options={options}
                onClose={() => setAreaVisible(false)}
                onChange={(v) => {
                  setArea(v);
                  form.setFieldsValue({ area: v });
                }}
              />
            </>
          </Form.Item>
          <Form.Item required label="详细地址" name="areaDetail">
            <Input type="text" placeholder="" />
          </Form.Item>
          <Form.Item required label="单位地址" name="address">
            <>
              <Cell
                onClick={() => {
                  setAddressVisible(true);
                }}
                style={{
                  padding: 0,
                  "--nutui-cell-divider-border-bottom": "0",
                }}
                className="nutui-cell--clickable"
                title={address?.length ? address : "请选择所在地区"}
                extra={<ArrowRight />}
                align="center"
              />
              <Cascader
                visible={areaVisible}
                placeholder="请选择"
                title="请选择所在地区"
                options={options}
                onClose={() => setAddressVisible(false)}
                onChange={(v) => {
                  setAddress(v);
                  form.setFieldsValue({ address: v });
                }}
              />
            </>
          </Form.Item>
          <Form.Item required label="详细地址" name="deAddressDetail">
            <Input type="text" placeholder="" />
          </Form.Item>
          <Form.Item required label="地址邮箱" name="email">
            <Input type="text" placeholder="" />
          </Form.Item>
        </div>
        <div className={styles.card}>
          <div>其他信息</div>
          <Form.Item required label="有房" name="hasF">
            <Switch defaultChecked />
          </Form.Item>
          <Form.Item required label="有车" name="hasC">
            <Switch defaultChecked />
          </Form.Item>
          <Form.Item required label="有公积金" name="hasG">
            <Switch defaultChecked />
          </Form.Item>
          <Form.Item required label="是否加急" name="isQuick">
            <Switch defaultChecked />
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}

export default Index;
